<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TweenMax</title>
    <style type="text/css">
    .grey{ width: 100px; height: 100px; border: 1px solid #DDD; }
    </style>
</head>
<body>
    <div class="grey greyA1">greyA1</div>
    <div class="grey greyA2">greyA2</div>

    <div class="grey greyB1">greyB1</div>
    <div class="grey greyB2">greyB2</div>

    <div class="grey greyC1">greyC1</div>
    <div class="grey greyC2">greyC2</div>
</body>
<script src="https://www.tweenmax.com.cn/greensock-js/minified/TweenMax.min.js"></script>
<script type="text/javascript">
//TweenMax.fromTo( target:Object, duration:Number, fromVars:Object, toVars:Object ) : TweenMax
//单个元素
const myTweenA1 = TweenMax.fromTo(document.querySelector('.greyA1'), 1, {x: 100}, {x: 200});
const myTweenA2 = TweenMax.fromTo(document.querySelector('.greyA2'), 1, {x: 100, delay: 0.5}, {x: 200});
//多个元素
const myTweenB1 = TweenMax.fromTo([document.querySelector('.greyB1'), document.querySelector('.greyB2')], 2, {x: 100}, {x: 200});
const myTweenB2 = TweenMax.fromTo([document.querySelector('.greyC1'), document.querySelector('.greyC2')], 2, {x: 100, delay: 1}, {x: 200});
</script>
</html>
